<div class="pannel-default">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
        <nz-tab [nzTitle]="language.title">
            <nz-table #nzTable [nzData]="userList" [nzLoading]="tableLoading">
                <thead>
                    <tr>
                        <th>{{'system.user.loginId'|translate}}</th>
                        <th>{{'system.user.contactName'|translate}}</th>
                        <th>{{'system.user.contactTel'|translate}}</th>
                        <th>{{'system.user.createTime'|translate}}</th>
                        <th>{{'system.user.status'|translate}}</th>
                        <th>{{'cz.title'|translate}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of nzTable.data">
                        <td>{{ data.loginId }}</td>
                        <td>{{ data.contactName }}</td>
                        <td>{{ data.contactTel }}</td>
                        <td>{{ data.createTime }}</td>
                        <td><nz-tag *ngIf="data.status === 'Y'" [nzColor]="'#87d068'">{{'system.user.Y'|translate}}</nz-tag><nz-tag *ngIf="data.status !== 'Y'" [nzColor]="'#f50'">{{'system.user.N'|translate}}</nz-tag></td>
                        <td><a (click)="updateUser(data)" style="margin-right: 8px;">{{'cz.edit'|translate}}</a></td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
        <button nz-button nzType="primary" (click)="addUser()">{{'system.user.add'|translate}}</button>
    </ng-template>
    <nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzOkLoading]="isOkLoading" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
        <form nz-form [formGroup]="validateForm" autocomplete="off">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="contactName">{{'system.user.contactName'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.contactName">
                    <input nz-input id="contactName" formControlName="contactName" placeholder="{{'placeholder.input'|translate}}{{'system.user.contactName'|translate}}" />
                    <nz-form-explain *ngIf="validateForm.get('contactName')?.dirty && validateForm.get('contactName')?.errors">{{'system.user.contactNameErr'|translate}}</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="contactTel" nzRequired>{{'system.user.contactTel'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('contactTel')">
                    <input nz-input id="contactTel" formControlName="contactTel" placeholder="{{'placeholder.input'|translate}}{{'system.user.contactTel'|translate}}" />
                    <nz-form-explain *ngIf="validateForm.get('contactTel')?.dirty && validateForm.get('contactTel')?.errors">{{'system.user.contactTelErr'|translate}}</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="loginId" nzRequired>{{'system.user.loginId'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('loginId')">
                    <input nz-input id="loginId" formControlName="loginId" placeholder="{{'placeholder.input'|translate}}{{'system.user.loginId'|translate}}" />
                    <nz-form-explain *ngIf="validateForm.get('loginId')?.dirty && validateForm.get('loginId')?.errors">{{'system.user.loginIdErr'|translate}}</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="loginPw" [nzRequired]="!activeData.id">{{activeData.id?language.reloginPw:language.loginPw}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('loginPw')">
                    <nz-input-group [nzSuffix]="suffixTemplate">
                        <input [type]="passwordVisible ? 'text' : 'password'" minlength="8" nz-input id="loginPw" formControlName="loginPw" placeholder="{{'system.user.loginPwErr'|translate}}" />
                    </nz-input-group>
                          <ng-template #suffixTemplate>
                            <i style="cursor: pointer" nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
                          </ng-template>
                    <nz-form-explain *ngIf="validateForm.get('loginPw')?.dirty && validateForm.get('loginPw')?.errors">{{'system.user.loginPwErr'|translate}}！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="roleId" nzRequired>{{'system.user.roleId'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('roleId')">
                    <nz-select style="width: 120px;" formControlName="roleId" nzPlaceHolder="{{'placeholder.input'|translate}}{{'system.user.roleId'|translate}}">
                        <nz-option *ngFor="let r of roleList" [nzValue]="r.id" [nzLabel]="r.name"></nz-option>
                    </nz-select>
                    <nz-form-explain *ngIf="validateForm.get('roleId')?.dirty && validateForm.get('roleId')?.errors">{{'placeholder.input'|translate}}{{'system.user.roleId'|translate}}！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="status" nzRequired>{{'system.user.status'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('status')">
                        <nz-select style="width: 120px;"  formControlName="status">
                            <nz-option nzValue="Y" [nzLabel]="language.Y"></nz-option>
                            <nz-option nzValue="N" [nzLabel]="language.N"></nz-option>
                        </nz-select>
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-modal>
</div>
